@import "./size";

$table-prefix-cls: #{$style-prefix}-table;
$table-td-cls: #{$table-prefix-cls}-td;
$table-th-cls: #{$table-prefix-cls}-th;
$table-th-left-cls: #{$table-th-cls}-left;
$table-th-right-cls: #{$table-th-cls}-right;
$table-td-left-cls: #{$table-td-cls}-left;
$table-td-right-cls: #{$table-td-cls}-right;

@mixin box-shadow-left() {
  .#{$table-th-right-cls}-sticky,
  .#{$table-td-right-cls}-sticky {
    box-shadow: -6px 0 6px 0px rgba(0, 0, 0, .05);
  }
}

@mixin box-shadow-right() {
  .#{$table-th-left-cls}-sticky,
  .#{$table-td-left-cls}-sticky {
    box-shadow: 6px 0 6px 0px rgba(0, 0, 0, .05);
  }
}

@mixin border-left() {
  .#{$table-th-right-cls}-sticky,
  .#{$table-td-right-cls}-sticky {
    border-right: $border-width-base $border-style-base $border-color-split;
  }
}

@mixin border-right() {
  tr > th:first-child.#{$table-th-left-cls}-sticky,
  tr > td:first-child.#{$table-td-left-cls}-sticky {
    border-left: $border-width-base $border-style-base $border-color-split;
  }
}

.#{$table-prefix-cls}-scroll-position-middle,
.#{$table-prefix-cls}-scroll-position-left {
  .#{$table-td-right-cls}-sticky + .#{$table-td-right-cls}-sticky {
    box-shadow: none;
  }

  .#{$table-th-right-cls}-sticky + .#{$table-th-right-cls}-sticky {
    box-shadow: none;
  }
}

.#{$table-prefix-cls}-scroll-position-middle,
.#{$table-prefix-cls}-scroll-position-right {
  table {
    &.#{$table-prefix-cls}-fixed {
      border-left: none;
    }
  }
}

.#{$table-th-left-cls}-sticky,
.#{$table-th-right-cls}-sticky,
.#{$table-td-right-cls}-sticky,
.#{$table-td-left-cls}-sticky {
  position: sticky !important;
  z-index: 1;
}

.#{$table-td-left-cls}-sticky,
.#{$table-td-right-cls}-sticky {
  background: $component-background;
}

.#{$table-prefix-cls}-tbody {
  & > tr {
    &:hover {
      & > td {
        &.#{$table-td-left-cls}-sticky {
          background: $table-row-hover-bg;
        }

        &.#{$table-td-right-cls}-sticky {
          background: $table-row-hover-bg;
        }
      }
    }
  }
}

.#{$table-prefix-cls}-thead > tr > th .#{$table-prefix-cls}-column-sorters > apes-dropdown {
  position: static !important;
}

.#{$table-prefix-cls}-scroll-position-middle {
  @include box-shadow-right;
  @include box-shadow-left;
}

.#{$table-prefix-cls}-scroll-position-left {
  @include box-shadow-left;
}

.#{$table-prefix-cls}-scroll-position-right {
  @include box-shadow-right;
}

.#{$table-prefix-cls}-bordered:not(.#{$table-prefix-cls}-small) {
  &.#{$table-prefix-cls}-scroll-position-middle {
    @include border-right;
    @include border-left;
  }

  &.#{$table-prefix-cls}-scroll-position-left {
    @include border-left;
  }

  &.#{$table-prefix-cls}-scroll-position-right {
    @include border-right;
  }
}

.#{$table-prefix-cls}-middle {
  > .#{$table-prefix-cls}-content {
    > .#{$table-prefix-cls}-scroll > .#{$table-prefix-cls}-body > .cdk-virtual-scroll-content-wrapper > table {
      > .#{$table-prefix-cls}-thead > tr > th,
      > .#{$table-prefix-cls}-tbody > tr > td {
        padding: $table-padding-vertical-md $table-padding-horizontal-md;
      }
    }
  }
}

.#{$table-prefix-cls}-small {
  &.#{$table-prefix-cls}-bordered {
    .#{$table-prefix-cls}-thead > tr > th:last-child {
      border-right: $border-width-base $border-style-base $border-color-split;
    }
    .#{$table-prefix-cls}-thead > tr:first-child > th:last-child {
      border-right: none;
    }
    .#{$table-prefix-cls}-footer {
      border-right: none;
    }

  }

  > .#{$table-prefix-cls}-content {
    > .#{$table-prefix-cls}-scroll > .#{$table-prefix-cls}-header > table,
    > .#{$table-prefix-cls}-scroll > .#{$table-prefix-cls}-body > table,
    > .#{$table-prefix-cls}-scroll > .#{$table-prefix-cls}-body > .cdk-virtual-scroll-content-wrapper > table {
      border: 0;

      > .#{$table-prefix-cls}-thead > tr > th {
        &.#{$table-th-left-cls}-sticky,
        &.#{$table-th-right-cls}-sticky {
          background: $component-background;
        }
      }

      > .#{$table-prefix-cls}-thead > tr > th,
      > .#{$table-prefix-cls}-tbody > tr > td {
        padding: $table-padding-vertical-sm $table-padding-horizontal-sm;
      }
    }
  }
}
